<template>
    <div class="edit_line">
      <div class="edit_label">
        <span v-if="important" class="edit_important">*</span>
        {{label}}
     </div>
      <div class="edit_value" v-if="editting">
        <input :type="type" @input="$emit('input', $event.target.value)" :placeholder="placeholder" v-bind:value="value">
      </div>
      <div class="show_value" v-if="!editting">
        {{value}}
      </div>
    </div>
</template>

<script>
  export default {
    name: 'edit-line',
    props: {
      label: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'text'
      },
      placeholder: {
        type: String,
        default: '请在此输入'
      },
      important: {
        type: Boolean,
        default: false
      },
      editting: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
      }
    },
    methods:{
      onTap(){
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  
  .edit_line {
    width: 100%;
    padding: 7px 0;
    line-height: 26px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    position: relative;
    .edit_label {
      width: 36%;
      text-align: right;
      float: left;
      padding-right: 10px;
      .edit_important {
        width: 10px;
        color: red;
      }
    }
    .edit_value {
      width: 64%;
      float: left;
      font-size: 14px;
      text-align: right;
      color: #2c3e50;
      input {
        width: 100%;
        font-size: 14px;
        padding-left: 15px;
        color: #2c3e50;
      }
    }
    .show_value {
      width: 64%;
      float: left;
      text-align: left;
    }
    .edit_select-control {
      flex: 3;
      text-align: left;
    }
    .edit_date-control {
      flex: 3;
      text-align: left;
    }
  }
</style>
